<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    custom-class="upload-dialog"
    @close="$emit('close')"
    width="600px"
  >
    <div class="cont">
      <div class="tit">上传文件</div>
      <el-upload
        class="upload"
        ref="upload"
        drag
        action="/order/upload"
        :auto-upload="false"
        multiple
        :on-success="onSuccess"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将pdf或zip文件拖到此处，或<em>点击上传</em>
          <div class="el-upload__tip color--red" slot="tip">文件不能超过300M，超过10个文件，请打包zip上传</div>
        </div>
      </el-upload>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('close')">取 消</el-button>
      <el-button type="primary" @click="onConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'UploadCom',
  data() {
    return {
    }
  },
  props: {
    visibleProp: Boolean,
    title: String
  },
  computed: {
    visible: {
      get() {return this.visibleProp },
      set() {}
    }
  },
  methods: {
    onSuccess(res) {
      if (res.code === '000000') {
        this.$emit('success')
      }
    },
    onConfirm() {
      this.$refs.upload.submit()
    }
  }
}
</script>

<style lang="scss" scoped>
:deep .upload-dialog {
  .cont {
    width: 365px;
    margin: 0 auto;

    .tit {
      margin-bottom: 10px;
    }
    
    .el-upload__tip {
      font-size: 14px;
      color: $color-red;
    }
  }
}
</style>
